<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘按下事件</title>
		<style>
			.box{
				margin: auto;
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		
		<div class="box"></div>
		<script src="jquery-1.12.4.min.js"></script>
		<script>
			/*给document元素添加键盘按下事件
			 1、获取按下的是哪个键
			 2、获取元素在页面上的位置
			 3、根据按下的是哪个键来判断操作
			 3.1若按下左边的箭头：设置元素的偏移重：offset({top:top,left:left-1})
			 若按下右边的箭头：offset({top:top,left:left+1})*/
			//获取元素
			var ele=$('.box');
			//给元素添加键盘按下事件
			$(document).keydown(
				function(){
					//获取是哪个案件
					var opt=event.which;
					//获取元素在页面上的位置
					var left=ele.offset().left;
					var top=ele.offset().top;
					//根据按下的建来设置元素的偏移里
					switch(opt){
						//左边
						case 37:
						ele.offset({
							top:top,
							left:left-100
						});
						break;
						//上边
						case 38:
						ele.offset({
							top:top-100,
							left:left
						});
						break;
						//下边
						case 40:
						ele.offset({
							top:top+100,
							left:left
						});
						break;
						//右边
						case 39:
						 ele.offset({
						 	top:top,
						 	left:left+100
						 });
						 break;
						 default:
						 break;
						
					}
				
				}
			);
		</script>
	</body>
</html>
